<template>
    <div class="row navBox align-items-center fixed-top bg-white   ">
        <div class="col d-flex align-items-center align-content-center ms-md-5 px-3" @click="routerIndex">
            <img src="../../assets/logo.png" style="height: 50px" alt="logo" />
        </div>
        <!-- nav -->
        <div class="col-6 col-md-6 col-sm-7 text-nowrap d-sm-flex justify-content-end d-none nav-center">
            <div class="father px-4" v-for="item in data.NavRouter" :key="item.title">
                {{ item.title }}
                <div class="item-box">
                    <div class="item " v-for="el in item.Link" :key="el.name">
                        <img class="me-3 img-thumbnail" style="width:40px" :src="el.iconImg" alt="" />
                        <router-link :to="el.path">{{ el.name }}</router-link>
                    </div>
                </div>
            </div>
        </div>
        <!-- 用户 -->
        <div class="col col-sm-1 d-flex align-items-center justify-content-end flex-nowrap">
            <div class="dropdown d-flex align-content-end">
                <!-- dropdown-toggle -->
                <div class="me-3" data-bs-toggle="dropdown" id="dropdownMenu" aria-expanded="false">
                    <i class="bi bi-person-fill fs-4"></i>
                </div>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
                    <li>
                        <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#registerModal">注册</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#registerModal">登录</a>
                    </li>
                    <li><a class="dropdown-item" href="#">退出登录</a></li>
                    <li><a class="dropdown-item" href="#">更多...</a></li>
                    <li>
                        <hr class="dropdown-divider" />
                    </li>
                    <li><a class="dropdown-item" href="#">联系作者</a></li>
                </ul>
            </div>
            <div class="d-flex align-content-end">
                <div class="me-3">
                    <i class="bi bi-justify fs-4 d-sm-none"></i>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框  -->
    <userRegister />
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
import Icon1 from '~src/assets/icon/Icon1.png'
import Icon2 from '~src/assets/icon/Icon2.png'
import Icon3 from '~src/assets/icon/Icon3.png'
import Icon4 from '~src/assets/icon/Icon4.png'
import Icon5 from '~src/assets/icon/Icon5.png'
import Icon6 from '~src/assets/icon/Icon6.png'
import Icon7 from '~src/assets/icon/Icon7.png'
import Icon8 from '~src/assets/icon/Icon8.png'
import Icon9 from '~src/assets/icon/Icon9.png'
import Icon10 from '~src/assets/icon/Icon10.png'
import Icon11 from '~src/assets/icon/Icon11.png'
import Icon12 from '~src/assets/icon/Icon12.png'
import Icon13 from '~src/assets/icon/Icon13.png'
import Icon14 from '~src/assets/icon/Icon14.png'
import Icon15 from '~src/assets/icon/Icon15.png'
import Icon16 from '~src/assets/icon/Icon16.png'
import Icon17 from '~src/assets/icon/Icon17.png'
import Icon18 from '~src/assets/icon/Icon18.png'

console.log(Icon1);

const data = reactive({
    NavRouter: [
        {
            title: "前端",
            Link: [
                {
                    name: "Vue",
                    path: "/Vue/vue2",
                    iconImg: Icon1,
                },
                {
                    name: "Echart",
                    path: "/web/echats",
                    iconImg: Icon2,
                },
                {
                    name: "腾讯地图API",
                    path: "/web/qqmap",
                    iconImg: Icon3,
                },
                {
                    name: "Pinia",
                    path: "/web/pinia",
                    iconImg: Icon4,
                },
                {
                    name: "LottieFiles",
                    path: "/web/lottie",
                    iconImg: Icon5,
                },
            ],
        },
        // {
        //     title: "UI设计",
        //     Link: [
        //         {
        //             name: "免费素材网站",
        //             path: "/ui/material",
        //             iconImg:'src/assets/icon/Icon6.png'
        //         },
        //         {
        //             name: "调色网站",
        //             path: "/ui/color",
        //             iconImg:'src/assets/icon/Icon7.png'
        //         },
        //         {
        //             name: "参考灵感网站",
        //             path: "/ui/inspiration",
        //             iconImg:'src/assets/icon/Icon8.png'
        //         },
        //         {
        //             name: "设计尺寸",
        //             path: "/ui/designSize",
        //             iconImg:'src/assets/icon/Icon9.png'
        //         },
        //         {
        //             name: "图标参考",
        //             path: "/ui/icon",
        //             iconImg:'src/assets/icon/Icon10.png'
        //         },
        //         {
        //             name: "UI设计模板",
        //             path: "/ui/formwork",
        //             iconImg:'src/assets/icon/Icon11.png'
        //         },
        //         {
        //             name: "后台管理开源参考",
        //             path: "/ui/admin",
        //             iconImg:'src/assets/icon/Icon12.png'
        //         },
        //         {
        //             name: "设计研发协作工具",
        //             path: "/ui/collaborationTools",
        //             iconImg:'src/assets/icon/Icon13.png'
        //         },

        //     ],
        // },
        {
            title: "便捷工具",
            Link: [
                {
                    name: "灵感网站",
                    path: "/Vue/vueRouter",
                    iconImg: Icon6,
                },
                {
                    name: "阴影",
                    path: "/Vue/vue2",
                    iconImg: Icon7,
                },
                {
                    name: "渐变色",
                    path: "/Vue/vue3",
                    iconImg: Icon8,
                },
                {
                    name: "调色网站",
                    path: "/Vue/vueRouter",
                    iconImg: Icon9,
                },
                {
                    name: "开发小工具下载",
                    path: "/Vue/vueRouter",
                    iconImg: Icon10,
                },
            ],
        },
        {
            title: "推荐",
            Link: [
                {
                    name: "Vue2",
                    path: "/Vue/vue2",
                    iconImg: Icon11,
                },
                {
                    name: "Vue3",
                    path: "/Vue/vue3",
                    iconImg: Icon12,
                },
                {
                    name: "VueRouter",
                    path: "/Vue/vueRouter",
                    iconImg: Icon13,
                },
            ],
        },
    ],
});
// 方法
const routerIndex = () => {
    router.push({ path: '/index' })
}

</script>
<style scoped lang="scss">
.navBox {
    box-shadow: rgb(0 0 0 / 5%) 0px 6px 24px 0px, rgb(0 0 0 / 8%) 0px 0px 0px 1px;
    height: 50px;

    .nav-center {
        .father {
            height: 50px;
            line-height: 50px;

            .item-box {
                left: 0;
                width: 100%;
                position: absolute;
                display: flex;
                justify-content: stretch;
                align-items: center;
                flex-wrap: wrap;
                padding: 0 20%;
                height: 0;
                min-height: 0;
                overflow: hidden;
                background: white;
                box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px;
                transition: all 0.8s ease-in;
                -webkit-transition: all 0.8s;

                .item {
                    width: 25% !important;
                }

                /* Safari */
            }

            &:hover {
                color: $main-color !important;
                border-bottom: $main-color 1px solid !important;

                .item-box {
                    min-height: 30vh;
                    max-height: auto;
                    opacity: 1;

                    .item {
                        width: 25% !important;

                        &:hover>a {
                            color: $main-color !important;
                        }
                    }
                }
            }
        }
    }
}
</style>
